<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
      <li>hhh</li>
    </ul>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: "Category",
    data() {
      return {
        scroll: null
      }
    },
    created() {
     
    },
    mounted() {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            pullUpLoad: true
        })

        this.scroll.on('scroll', (position) => {
            console.log(position)
        })

        this.scroll.on('pullingUp', () => {
            console.log('上拉加载更多')
        })
      })
    }
  }
</script>

<style scoped>
  .wrapper {
    background-color: red;
    height: 150px;
    overflow: hidden;
  }
</style>